<template>
  <div class="operate-log">
    <!-- 查询表单 start -->
    <ui-form :model="queryForm" class="query-form">
      <ui-form-item label="客户名称">
        <ui-input type="text" placeholder="请输入客户名称" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item label="证件号码">
        <ui-input type="text" placeholder="请输入证件号码" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item label="联系电话">
        <ui-input type="number" placeholder="请输入联系电话" v-model="queryForm.searchName"> </ui-input>
      </ui-form-item>
      <ui-form-item>
        <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
        <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
      </ui-form-item>
    </ui-form>
    <!-- 查询表单 end -->
    <!-- 数据表格 start -->
    <vx-nodata :list="tableData" v-loading="isLoading" sub-title="暂无数据">
      <ui-table :data="tableData">
        <ui-table-column prop="id" label="流水号"> </ui-table-column>
        <ui-table-column prop="operName" label="用户名"> </ui-table-column>
        <ui-table-column prop="operTime" label="操作时间"> </ui-table-column>
        <ui-table-column prop="businessType" label="业务类型"> </ui-table-column>
        <ui-table-column label="操作结果">
          <template v-slot="scope">
            <span :class="scope.row.status === 0 ? 'success' : 'error'">{{ scope.row.status === 0 ? '成功' : '失败' }}</span>
          </template>
        </ui-table-column>
        <!-- <ui-table-column label="操作类型">
            <template v-slot="scope">
              {{ format(scope.row.operType) }}
            </template>
          </ui-table-column> -->
        <ui-table-column label="操作">
          <template v-slot="scope">
            <ui-button type="text" icon="ui-icon-tickets" @click="subDetail(scope.row)"
              v-loading="scope.row.detailLoading">详情</ui-button>
          </template>
        </ui-table-column>
      </ui-table>
      <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout"
        :page-sizes="pageSizeList" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </ui-pagination>
    </vx-nodata>
    <!-- 数据表格 end -->
    <!-- 详情弹框 start -->
    <vx-dialog :append-to-body="false" auto-hide v-model="showDetail" title="操作日志详情">
      <table class="detail-info-table">
        <tr>
          <th class="detail-info-table-title">流水号</th>
          <td class="detail-info-table-content">{{ logDetail.id }}</td>
          <th class="detail-info-table-title">用户名</th>
          <td class="detail-info-table-content">{{ logDetail.operName }}</td>
        </tr>
        <tr>
          <th class="detail-info-table-title">操作时间</th>
          <td class="detail-info-table-content">{{ logDetail.operTime | dateFilter('YYYY-MM-DD HH:mm:ss') }}</td>
          <th class="detail-info-table-title">业务类型</th>
          <td class="detail-info-table-content">{{ logDetail.businessType }}</td>
        </tr>
        <tr>
          <th class="detail-info-table-title">操作结果</th>
          <td class="detail-info-table-content" :class="logDetail.status === 0 ? 'success' : 'error'">
            {{ logDetail.status === 0 ? '成功' : '失败' }}
          </td>
          <th class="detail-info-table-title">主机IP</th>
          <td class="detail-info-table-content">{{ logDetail.operIp }}</td>
        </tr>
        <tr>
          <th class="detail-info-table-title">操作URL</th>
          <td class="detail-info-table-content">{{ logDetail.operUrl }}</td>
          <th class="detail-info-table-title">方法</th>
          <td class="detail-info-table-content">{{ logDetail.method }}</td>
        </tr>
        <tr>
          <th class="detail-info-table-title">操作类型</th>
          <td class="detail-info-table-content">{{ format(logDetail.operType) }}</td>
          <th class="detail-info-table-title">请求方式</th>
          <td class="detail-info-table-content">{{ logDetail.requestMethod }}</td>
        </tr>
        <tr>
          <th class="detail-info-table-title">操作字段</th>
          <td colspan="5">{{ logDetail.operParam }}</td>
        </tr>
      </table>
    </vx-dialog>
    <!-- 详情弹框 end -->
  </div>
</template>
  
<script>
import poerateLogApi from '@/api/operate-log';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
export default {
  name: 'SynthesisInfo',
  mixins: [pagination],
  data() {
    return {
      queryForm: {
        operTime: [],
        types:'',
        searchName:''
      }, // 查询表单
      operatorType: [], // 操作类型列表
      tableData: [], // 列表数据
      isLoading: false, // 查询列表loading
      showDetail: false, // 详情弹框
      logDetail: {}, // 详情数据
      layout: 'prev, pager, next, total',
    };
  },
  created() {
    // 获取操作类型选项
    this.queryOperatorType();
    // 获取列表数据
    this.searchList();
  },
  methods: {
    /**
     * 获取详情
     * @param {object} value 当前列表数据
     */
    async subDetail(value) {
      this.$set(value, 'detailLoading', true);
      try {
        const res = await poerateLogApi.getlogDetail({ id: value.id });
        this.logDetail = res.data;
        this.showDetail = true;
      } finally {
        this.$set(value, 'detailLoading', false);
      }
    },
    /**
     * 格式化操作类型字段
     * @param {number} value 操作类型值
     * @returns {string} 格式化后的操作类型名称
     */
    format(value) {
      let result = this.operatorType.find((i) => i.dictCode === value);
      if (result) {
        return result.dictName;
      } else {
        return '其他';
      }
    },
    /**
     * 获取操作类型选项
     */
    async queryOperatorType() {
      try {
        const res = await poerateLogApi.dictByType({ types: 'operator_type' });
        if (res.data.operator_type) {
          this.operatorType = res.data.operator_type.map((item) => {
            // 将dictCode隐式转换为number类型
            item.dictCode = item.dictCode - 0;
            return item;
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    /**
     * 查询操作日志
     * @param {boolean} val 是否重置当前页签
     */
    async searchList(val) {
      this.isLoading = true;
      // 点击查询按钮 将页签重置为1
      if (val) {
        this.currentPage = 1;
      }
      try {
        const res = await poerateLogApi.getLogList({
          ...this.queryForm, // 筛选条件
          beginTime: this.queryForm.operTime[0] || '', // 开始时间
          offTime: this.queryForm.operTime[1] || '', // 结束时间
          pageSize: this.pageSize, // 页码
          pageNum: this.currentPage, // 每页条数
        });
        res.data.list.forEach((item, index) => {
          item.index = index + 1;
        });
        this.tableData = res.data.list;
        this.total = Number(res.data.total || 0);
      } finally {
        this.isLoading = false;
      }
    },
    /**
     * 重置
     */
    reset() {
      this.queryForm = { operTime: [] };
      this.currentPage = 1;
      this.searchList();
    },
  },
};
</script>
  
<style lang="scss">
.operate-log {

  .ui-icon-plus,
  .ui-icon-search {
    color: #fff;
  }

  .vx-dialog.ui-dialog {
    width: 750px;
  }

  .success {
    color: $color-success;
  }

  .error {
    color: $color-danger;
  }
}
</style>
  